import { List, Icon, Grid, NavBar } from 'antd-mobile';
import { WhiteSpace } from 'antd-mobile';
const Item = List.Item;
const Brief = Item.Brief;
export default class Footer extends React.Component {
	constructor(props) {
    	super(props);

    	this.state = {
    		contentLeft: props.contentLeft,
    		contentRight: props.contentRight,
    		rightIcon: props.rightIcon,
    	};
  	}

  componentWillReceiveProps(nextProps) {
  		this.setState(Object.assign({}, this.state, {
  			contentLeft: nextProps.contentLeft,
    		contentRight: nextProps.contentRight,
    		rightIcon: nextProps.rightIcon,
  		}));
  }

	render() {
		return (<div className="footer-container">
			<NavBar 
				leftContent={this.state.contentLeft}
				iconName={this.state.contentLeft ? 'left' : null}
		     	mode="light"
		     	onLeftClick={() => this.props.onClick("prev")}
		     	rightContent={[(
		     		<span key="0" onClick={() => this.props.onClick("next")}>
		     			{this.state.contentRight}
		     		</span>),
			        this.state.rightIcon ? <Icon key="1" type="right" /> : null
		     	]}
		    ></NavBar>
		</div>);
	}
}



